<!--
 * @Description: 
 * @Author: ljl
 * @Date: 2024-11-05 19:49:54
 * @LastEditors: rendc
 * @LastEditTime: 2024-11-06 16:24:08
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <style>
        /* 覆盖全局默认样式 */
        * {
        /* 去掉默认margin padding */
        margin: 0;
        padding: 0;
        /* 更改盒子模型 */
        box-sizing: border-box;
        }

        a {
        /* a标签去掉下划线 */
        text-decoration: none;
        }
        body {
            padding-top: 25px;
            background-image:url("./img/image.png") ;
            background-repeat: no-repeat;
            background-position: center;        
        }
        #app{
            width: 900px;
            height: 500px;
            border: 8px solid orange;
            border-radius: 20px;
            margin: auto;
            background-color: white;
        }
        .divLeft{
            float: left;
            width: 25%;
            padding-top: 15px;
            padding-left: 15px;
        }
        .divLeft>p:first-child{
            color: #ffd026;
            font-size: 20px;
        }
        .divLeft>p:last-child{
            color: #a6a6a6;
            font-size: 20px;
        }
        .divCenter{
            float: left;
            /* 这里减去的值是左右宽度 */
            width: calc(100% - 25% - 25%);
            padding: 25px;
        }
        
        h2 {
            color: #333;
            text-align: center;
        }
        
        div {
            margin-bottom: 15px;
        }
        
        label {
            display: inline-block;
            width: 100px;
            font-weight: bold;
        }
        
        .username,
        .password,
        .email,
        .name,
        .phone,
        .day {
            width: 250px;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }
        .forInt{
            width: 140px;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        
        #imgCode{
            height: 32px;
            /* 垂直居中 */
            vertical-align: middle;
        }
        input[type="radio"] {
            margin-right: 5px;
        }

        input[type="submit"] {
            background-color: #007bff;
            color: #fff;
            padding: 10px 20px;
            border: none;
            border-radius: 3px;
        }

        input[type="submit"]:hover {
            background-color: #0056b3;
        }
        .an{
            text-align: center;
        }

        .divRight{
            float: right;
            width: 25%;
            padding-top: 15px;
            padding-right: 15px;
        }
        .divRight>p{
            font-size: 15px;
            color: #a6a6a6;
            text-align: right;
        }
        .divRight p a{
            color: pink;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 左侧 -->
        <div class="divLeft">
            <p>新用户注册</p>
            <p>USER REGISTER</p>
        </div>
        
        <!-- 中间 -->
        <div class="divCenter">
            <form action="">
                <div>
                    <label>用户名:</label>
                    <input class="username" placeholder="请输入账号" name="username">
                </div>
                <div>
                    <label>密 码:</label>
                    <input class="password" placeholder="请输入密码" name="password">
                </div>
                <div>
                    <label>Email:</label>
                    <input class="email" placeholder="请输入 Email" name="email">
                </div>
                <div>
                    <label>姓 名:</label>
                    <input class="name" placeholder="请输入真实姓名" name="name">
                </div>
                <div>
                    <label>手机号:</label>
                    <input class="phone" placeholder="请输入您的手机号" name="phone" type="tel">
                </div>
                <div>
                    <label>性别：</label>
                    <label class="gender">
                        男<input type="radio" name="gender" value="男">
                        女<input type="radio" name="gender" value="女">
                </div>
                <div>
                    <label>出生日期：</label>
                    <input class="day" type="date" name="birth">
                </div>
                <div >
                    <label>验证码:</label>
                    <input class="forInt" name="verification_code">
                    <img id="imgCode" src="./img/image2.png" alt="">
                </div>
                <div class="an">
                    <input type="submit" value="注册">
                </div>
            </form>
        </div>
        <!-- 右侧 -->
        <div class="divRight">
            <p>已有账号？<a href="#">立即登录</a></p>    
        </div>
    </div>
</body>

</html>